<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个性留言板</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="../images/lfg-log.ico">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<script type="text/javascript"> 
$(function(){
	
	// 移到留言上可以删除,编辑-------------------------------------------
		$('#mian .list .onep').hover(function() {
			$(this).find('a').show();
			$(this).find('.edit_a').show();
			$(this).find('.content').addClass('content1');
		}, function() {
			$(this).find('a').hide();
			$(this).find('.edit_a').hide();
			$(this).find('.content').removeClass('content1');
		});

   // 留言方式的切换------------------------------------------------
		var c=1;
		$('.close').click(function(event) {
			if(c==1){
				$('#right').stop().animate({"top": 800+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": 0+'px'},3000);
				c=0;
			}else{
				$('#right').stop().animate({"top": 50+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": -120+'px'},3000);
				c=1;
			}
		});

	
	
})


</script>

</head>

<body>
<div id="top">
		<h1>黎老师个性留言板</h1>
</div>

<div id="mian_out">
	
	
	
	  <div id="mian">
		  <div style="width: 100%;">
		    <form action="" method="get">
		    <div class="input-group mb-3">
		      <input type="text" class="form-control" placeholder="Search" name="search" value="<?php echo isset($_GET['search']) ?$_GET['search']:''?>">
		      <div class="input-group-append">
		        <button class="btn btn-success" type="submit">Go</button>  
		       </div>
			   </div>
		   </form>
			<h2>一共有<?php echo $sum; ?>条留言</h2>
			<ul class="list">
				<?php 
				foreach($bbs as $row)
				{
				?>
      			<li class="onep">
					<p class="pic"><img src="<?php echo $row['imgurl'] ?>" alt="" /></p>
					<p class="name"><?php echo $row['username'] ?></p>
					<p class="content"><?php echo $row['message'] ?><span> (来自火星"<?php echo $row['sex'] ?>侠"的留言)</span>
					<span style="float: right;" ><?php echo $row['m_date'] ?></span>
					</p>
					<a class="edit_a" href="javascript:" onclick= href='bbsupdate.php?id=<?php echo $row['id']?>'>修改</a>
					<a class="delete" href="javascript:" onclick="if(confirm('确定删除吗？')) location.href='deladd.php?id=<?php echo $row['id'] ?>'" >删除</a>
				</li>
				<?php
				}
				?>
			</ul>
			<!-- <?php 
			$q=($p<=1)?1:$p-1;
			$h=($p>=$pnum)?$punm:$p+1;
			$s=isset($_GET['search'])?trim($_GET['search']):'';
			?> -->
			<nav aria-label="Page navigation example">
				<p>_</p>
			  <ul class="pagination">
				 <?php
				 for($i=1;$i<=$pnum;$i++){
				 		
				 ?>
				 
				  <li class="page-item"><a class="page-link" href="index.php?p=<?php echo $i ?>"><?php echo $i ?></a></li>			  
				 
				<?php
				  }
			   ?>
			  </ul>
			</nav>
			</div>
			
   </div>
   </div>
   </div>
   <div id="right">
			<h2>留下你的脚步吧</h2>
			<form action="#" method="post" id="up">
				<p class="one">
				昵称:<input class="name" name="username" type="text" placeholder="你的名字" />
				<input type="radio" name="sex" value="男" checked="checked" />男侠
				<input type="radio" name="sex" value="女" />女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">
					<input type="radio" name="imgurl" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/4.jpg" /><img src=" images/4.jpg" alt="" />
				</p>
				
			<div style="display: flex; justify-content: space-around; margin-top: 15px;"><input type="text" value="" placeholder="请输入验证码（区分大小写）" 
				 style="height:43px;"id ="text">
			    <div><canvas id="canvas" width="100" height="43" onclick="dj()" 
				  style="border: 1px solid #ccc;
			        border-radius: 5px;"></canvas>
					</div>
					</div>
			    <p class="thr"><button class="btn" onclick="sublim()">提交</button></p>
			    </body>
				
			<script>
			var a=document.querySelector('#up')
			 var show_num = [];
			 draw(show_num);
			function dj(){
			 draw(show_num);   
			 }
			function sublim(){
			var val=document.getElementById("text").value;  
			            var num = show_num.join("");
			            if(val==''){
			                alert('请输入验证码！');
							return;
			            }else if(val == num){
			               
							a.action="upadd.php";
			
			            }else{
			                alert('验证码错误,请重新输入！');
							return;
							draw(show_num);
			       
			            }
			        
			       
					
			          }
			function draw(show_num) {
			        var canvas_width=document.getElementById('canvas').clientWidth;
			        var canvas_height=document.getElementById('canvas').clientHeight;
			        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
			        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
			        canvas.width = canvas_width;
			        canvas.height = canvas_height;
			        var sCode = "1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
			        var aCode = sCode.split(",");
			        var aLength = aCode.length;//获取到数组的长度
						
			        for (var i = 0; i <= 3; i++) {
			            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
			            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			            var txt = aCode[j];//得到随机的一个内容
			            show_num[i] = txt;
			            var x = 10 + i * 20;//文字在canvas上的x坐标
			            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			            context.font = "bold 23px 微软雅黑";
			
			            context.translate(x, y);
			            context.rotate(deg);
			
			            context.fillStyle = randomColor();
			            context.fillText(txt, 0, 0);
			
			            context.rotate(-deg);
			            context.translate(-x, -y);
			        }
			        for (var i = 0; i <= 5; i++) { //验证码上显示线条
			            context.strokeStyle = randomColor();
			            context.beginPath();
			            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			            context.stroke();
			        }
			        for (var i = 0; i <= 30; i++) { //验证码上显示小点
			            context.strokeStyle = randomColor();
			            context.beginPath();
			            var x = Math.random() * canvas_width;
			            var y = Math.random() * canvas_height;
			            context.moveTo(x, y);
			            context.lineTo(x + 1, y + 1);
			            context.stroke();
			        }
			    }
			function randomColor() {//得到随机的颜色值
			        var r = Math.floor(Math.random() * 256);
			        var g = Math.floor(Math.random() * 256);
			        var b = Math.floor(Math.random() * 256);
			        return "rgb(" + r + "," + g + "," + b + ")";
			    }
			</script>
				
				

			</form>
			<div class="close"></div>
</div>
   
</div>

<div id="bottom_out">
		<div id="bottom">
			<form action="upadd.php" method="post">
				<p class="one">
				昵称:<input class="name" name="username" type="text" placeholder="大爷你的名字" />
				<br/><br/>
				<input type="radio" name="sex" value="男" checked="checked" />男侠
				<input type="radio" name="sex" value="女" />女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">
					<input type="radio" name="imgurl" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/4.jpg" /><img src=" images/4.jpg" alt="" />
				</p>
				<p class="thr"><input class="btn" type="submit" value="提交" /></p>
			</form>
			<div class="close"></div>
		</div>
</div>





</body>
</html>
